<template>
	<div id="id">
		<div class="zhonjdiv beijng">
			<div v-if="loginStatus">
				<P class="weizhi"><img class="borders" :src="loginStatus ? userInfo.avatar : Img" alt="图片"
						style="width: 70px" /> <span style="width:6.9rem">{{ userInfo.nickname}}</span></P>
			</div>
			<div v-else class="biaoqian">
				<van-image class='borders' round width="5rem" height="5rem" :src="Img" />
				<button class="getbtn" @click="getbtn">登录</button>
			</div>
			<div class="div1a">
				<img src="../assets/消息.png" style="width:20%" />
			</div>
		</div>
		<van-cell title="我的订单" value="全部订单" @click='quanbu' size="large" is-link />
		<!--  -->
		<van-grid :boder='false'>
			<van-grid-item :border='false' icon="photo-o" text="代付款" />
			<van-grid-item :border='false' icon="photo-o" text="收货地址" />
			<van-grid-item :border='false' icon="photo-o" text="待评价" />
			<van-grid-item :border='false' icon="photo-o" text="退换修" />
		</van-grid>
		<!--  -->
		<img style="width: 100%;"
			src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8471a80a7dea49a3889386c16ebdc12.jpg?w=2452&h=920" />
		<!--  -->
		<van-cell title="小米会员" :icon="image" size="large" is-link />
		<van-cell title="会员中心" :icon="image1" size="large" is-link />
		<van-cell title="服务中心" :icon="image2" size="large" is-link />
		<van-cell title="小米之家" :icon="image3" size="large" is-link />
		<van-cell title="更多功能" :icon="image4" size="large" is-link />
		<van-cell @click="seting" :icon="image5" title="更多设置" size="large" is-link />
		<div style="height: 3rem;"></div>
	</div>
</template>
<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				image: require('../assets/VIP.png'),
				image1: require('../assets/huiyuan.png'),
				image2: require('../assets/fuwu.png'),
				image3: require('../assets/huiyuan.png'),
				image4: require('../assets/家.png'),
				image5: require('../assets/更多.png'),
				image6: require('../assets/设置.png'),
				Img: "https://img0.baidu.com/it/u=2846839356,2979116833&fm=26&fmt=auto&gp=0.jpg",
			};
		},
		computed: {
			...mapState({
				//state.login.userInfo
				userInfo: (state) => state.login.userInfo,

				loginStatus: (state) => state.login.loginStatus,
			}),

		},
		methods: {
			getbtn() {
				this.$router.push({
					name: "Login",
				});
			},
			quanbu(){
				this.$router.push({
				  name:'Indent'
				})
			},
			seting() {
				console.log("dsd")
				this.$router.push({
					name: "Setting",
				});
			},
		},
	};
</script>
<style>
	.borders {
		border-radius: 500px;
		margin-left: 6%;
	}

	.zhonjdiv {}

	.getbtn {
		line-height: 60%;
		background-color: coral;
		border: coral 1px solid;
		color: white;
		width: 3rem;
		height: 2rem;
		margin-left: 0.5rem;
	}

	.weizhi {
		/* text-align: center; */
		display: flex;
		align-items: center;
	}

	.beijng {
		width: 100%;
		height: 150px;
		background-image: url(../assets/tupiang1.png);
		display: flex;
		align-items: center;
	}

	.biaoqian {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.div1a {
		text-align: right;
		z-index: 99;
		width: 78%;
		height: 90%;
		padding-right: 1rem;
	}
</style>
